<template>
  <div>
    <el-dialog
      title="历史议价"
      :visible.sync="showDialog"
      append-to-body
      :close-on-click-modal="false"
      @close="close"
      width="50%"
    >
      <avue-crud
        ref="crud"
        :table-loading="loading"
        v-model="form"
        :data="data"
        :option="option"
        :permission="getpermission"
        @on-load="tableonLoad"
        ><template slot="menu" slot-scope="{ row }">
          <el-button
            type="text"
            icon="el-icon-view"
            size="size"
            @click="detailview(row)"
            >查看备注</el-button
          >
        </template>
      </avue-crud>
      <div slot="footer">
        <el-button @click="close()" type="primary">关闭</el-button>
      </div>
    </el-dialog>
    <detailview ref="detailview" :viewData="viewData"></detailview>
  </div>
</template>

<script>
import { historicalbarrier } from "@/api/inquiry/domestictrade/index";
import detailview from "../../components/detailview.vue";
export default {
  components: {
    detailview,
  },
  name: "bulkhistorical",
  props: {
    ids: {},
  },
  data() {
    return {
      query: {},
      form: {},
      data: [],
      showDialog: false,
      callback: () => {},
      loading: false,
      viewData: "",
    };
  },
  watch: {
    ids() {
      this.query = this.ids;
      this.tableonLoad();
    },
  },
  computed: {
    option() {
      return {
        height: "auto",
        calcHeight: 30,
        align: "center",
        headerAlign: "center",
        border: true,
        searchLabelWidth: 120,
        searchMenuSpan: 6,
        tip: false,
        viewBtn: false,
        addBtn: false,
        refreshBtn: false,
        columnBtn: false,
        editBtn: false,
        delBtn: false,
        labelWidth: 120,
        column: [
          {
            label: "议价人",
            prop: "bidder",
          },
          {
            label: "≤1吨",
            prop: "quotedPrice1",
          },
          {
            label: "≤3吨",
            prop: "quotedPrice2",
          },
          {
            label: "≤5吨",
            prop: "quotedPrice3",
          },
          {
            label: "≤10吨",
            prop: "quotedPrice4",
          },
          {
            label: "≤15吨",
            prop: "quotedPrice5",
          },
          {
            label: "≤20吨",
            prop: "quotedPrice6",
          },
          {
            label: "≤25吨",
            prop: "quotedPrice7",
          },
          {
            label: "≤30吨",
            prop: "quotedPrice8",
          },
          {
            label: "报价时间",
            prop: "quotationTime",
          },
          {
            label: "报价说明",
            prop: "quoteDescription",
          },
        ],
      };
    },
  },
  methods: {
    detailview(row) {
      this.viewData = row.quoteDescription;
      this.$refs.detailview.open(row, {
        callback: () => {},
      });
    },
    tableonLoad(page, params = {}) {
      this.loading = true;
      historicalbarrier(Object.assign(params, this.query)).then((res) => {
        this.loading = false;
        let data = res.data.data.map((item) => {
          return { ...item, ...JSON.parse(item.quotation) };
        });
        this.data = data.sort((a, b) => {
          return (
            new Date(a.quotationTime).getTime() -
            new Date(b.quotationTime).getTime()
          );
        });
        this.$refs.crud.doLayout();
      });
    },
    open(id, { callback }) {
      this.callback = callback;
      this.showDialog = true;
    },
    close() {
      this.showDialog = false;
    },
  },
};
</script>

<style></style>
